<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="../../resource/css/reset.css"/>
        <link type="text/css" rel="stylesheet" href="../../resource/css/api_index.css"/>
        <script type="text/javascript" src="../../resource/js/fw/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div class="pk-wrap">

            <div class="pk-unit-wrap">
                <div class="pk-unit">
                    <h1 class="clearfix">
                        <span class="pk-color-title">HTML中使用JavaScript的三种常见方式</span>
                        <span class="pk-float-right pk-tip">Basic > 使用JavaScript</span>
                    </h1>
                </div>
                <div class="pk-unit">
                    <div class="pk-unit-with-style">
                        <div class="pk-unit-tag">Description</div>
                        <pre>一、内联方式
      在页面中使用&lt;script&gt;元素，并设定其type属性为&quot;text/javascript&quot;，然后按照下面的方式添加到html文档的&lt;head&gt;或&lt;body&gt;元素中：
      &lt;script type=&quot;text/javascript&quot;&gt;
          alert(&quot;test&quot;);
      &lt;/script&gt;
二、外部加载
      此方式使用方式与一所使用的是一样的，只不过其多设定一个src属性，如：
      &lt;script type=&quot;text/javascript&quot; src=&quot;index.js&quot;&gt;&lt;/script&gt;

      以上两种方式，当添加到&lt;head&gt;元素中时，会在文档完成排版和绘制前先执行&lt;script&gt;中代码的解释，从上至下，此过程页面其余的内容不会被加载或显示出来，直到解释完毕，浏览器才执行文档排版与绘制；若是添加在&lt;body&gt;结束标签&lt;/body&gt;之前的话，则是先浏览器排版与绘制html文档后才执行JavaScript代码的解释，这样会让用户先看到页面的内容，再体验JavaScript带来的交互效果。后者成为延迟脚本。

三、延迟加载
      另一种延迟脚本的实现方式是通过JavaScript的DOM操作方式来加载指定的外部资源。其实现方式请参看“代码示例”。</pre>
                    </div>
                </div>
            </div>

            
            
            
            
                        <div class="pk-unit-wrap">
                <div class="pk-unit">
                    <h1 class="clearfix">
                        <span class="pk-color-title">代码示例</span>
                    </h1>
                </div>
                <div class="pk-unit">
                    <div class="pk-unit-with-style pk-code">
                        <div class="pk-unit-tag">
                            <span>Code</span>
                        </div>
                        <div class="pk-unit-fns">
                            <a href="javascript:" title="Fold or unfold the code" data-rel="fold-btn">-Fold</a>
                            <a href="javascript:" id="codeCopy">Copy</a>
                        </div>
                        <pre><span class="pk-code-key">function</span> loadScript(url){
	<span class="pk-code-key">var</span> el = document.createElement("script");
	el.setAttribute("type", "text/javascript");
	el.setAttribute("src", url);
	document.body.appendChild(el);
}</pre>
                    </div>
                </div>
            </div>

            <script type="text/javascript" src="../../resource/js/fw/clipboard/ZeroClipboard.min.js"></script>
            <script type="text/javascript" src="../../resource/js/api_index.js"></script>
            <script type="text/javascript">
                if(window.clipboardData){
                    $('#codeCopy').click(function(){
                        window.clipboardData.setData('text',$(this).parent().next().text());
                    });
                }else{
                    clipboard($('#codeCopy')[0],"../../resource/js/fw/clipboard/ZeroClipboard.swf",$('#codeCopy').parent().next());
                }
            </script>
                    </div>
    </body>
</html>
